<template>
    <div class="mini_list">
        <el-breadcrumb>
            <el-breadcrumb-item>房型管理</el-breadcrumb-item>
            <el-breadcrumb-item>MINI商城订单</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="mini_content">
            <el-form :inline="true">
                <el-form-item>
                    <el-dropdown @command="setState">
                        <span class="el-dropdown-link">
                            {{stateTitle}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{ 'key' : 'state', value: '', title: '全部状态'}">全部状态</el-dropdown-item>
                            <el-dropdown-item :command="{ 'key' : 'state', value: '1', title: '订单待处理'}">订单待处理</el-dropdown-item>
                            <el-dropdown-item :command="{ 'key' : 'state', value: '2', title: '商品准备中'}">商品准备中</el-dropdown-item>
                            <el-dropdown-item :command="{ 'key' : 'state', value: '3', title: '订单配送中'}">订单配送中</el-dropdown-item>
                            <el-dropdown-item :command="{ 'key' : 'state', value: '4', title: '订单已送达' }">订单已送达</el-dropdown-item>
                            <el-dropdown-item :command="{ 'key' : 'state', value: '5', title: '订单已取消' }">订单已取消</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-form-item>
                <el-form-item>
                    <el-dropdown @command="setPay">
                        <span class="el-dropdown-link">
                            {{payTitle}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{ 'key' : 'pay', value: '', title: '支付方式'}">支付方式</el-dropdown-item>
                            <el-dropdown-item :command="{ 'key' : 'pay', value: '1', title: '押金抵扣'}">押金抵扣</el-dropdown-item>
                            <el-dropdown-item :command="{ 'key' : 'pay', value: '2', title: '微信支付'}">微信支付</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入商品名称" v-model="search" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入操作员" v-model="operator" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入送货房间" v-model="room" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                    icon="el-icon-search"
                    style=" line-height: 32px;padding: 0 21px;"
                    @click="handleSearch"></el-button>
                </el-form-item>
            </el-form>

            <el-form>
                <el-form-item>
                    <el-table :data="tableData"
                        max-height="600"
                        class="easy-table"
                        v-loading="loading">
                        <el-table-column prop="orderNum"
                        fixed
                        width="150"
                        label="订单号">
                        </el-table-column>
                        <el-table-column prop="product"                       
                        label="商品名称">
                        </el-table-column>
                        <el-table-column prop="stateCN"                       
                        label="订单状态">
                        </el-table-column>
                        <el-table-column prop="pay"                       
                        label="支付方式">
                        </el-table-column>
                        <el-table-column prop="money"                       
                        label="付款金额">
                        </el-table-column>
                        <el-table-column label="下单时间"
                        prop="orderTime">
                        </el-table-column>
                        <el-table-column prop="room"                      
                        label="送货房间">
                        </el-table-column>
                        <el-table-column prop="name"                     
                        label="操作员">
                        </el-table-column>
                        <el-table-column prop="acceptTime"                      
                        label="接单时间">
                        </el-table-column>
                        <el-table-column prop="arriveTime"                      
                        label="送达时间">
                        </el-table-column>
                        <el-table-column label="操作"
                        fixed="right"
                        width="150">
                        <template slot-scope="scope">
                            <el-button type="text"
                            size="small"
                            @click="particulars(scope.row)" v-if="scope.row.state == 1 && scope.row.onoff == true" v-has="'miniorderstate'">立即处理</el-button>
                            <el-button type="text"
                            size="small"
                            @click="particulars(scope.row)" v-if="scope.row.state == 1 && scope.row.onoff == false" v-has="'miniorderstate'">查看详情</el-button>
                            <el-button type="text"
                            size="small"
                            @click="particulars(scope.row)" v-if="scope.row.state == 2 && scope.row.onoff == true" v-has="'miniorderstate'">立即配送</el-button>
                            <el-button type="text"
                            size="small"
                            @click="particulars(scope.row)" v-if="scope.row.state == 2 && scope.row.onoff == false" v-has="'miniorderstate'">查看详情</el-button>
                            <el-button type="text"
                            size="small"
                            @click="particulars(scope.row)" v-if="scope.row.state == 3 && scope.row.onoff == true" v-has="'miniorderstate'">确定到达</el-button>
                            <el-button type="text"
                            size="small"
                            @click="particulars(scope.row)" v-if="scope.row.state == 3 && scope.row.onoff == false" v-has="'miniorderstate'">查看详情</el-button>
                            <el-button type="text"
                            size="small"
                            @click="particulars(scope.row)" v-if="scope.row.state == 4" v-has="'miniorderinfo'">查看详情</el-button>
                            <el-button type="text"
                            size="small"
                            @click="particulars(scope.row)" v-if="scope.row.state == 5" v-has="'miniorderinfo'">查看详情</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item>
                    <el-pagination @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout="total, prev , pager , next, sizes"
                        :total="orderCount">
                    </el-pagination>
                </el-form-item>
            </el-form>
            <!-- 查看弹出框 -->
            <!-- <el-dialog title="商品订单详情" :visible.sync="dialogVisible" width="600px">
                <div class="search_list">
                    <h1 class="search_list_title">商品列表</h1>                  
                    <ul class="list_ul">
                        <li v-for="(item,index) in infos" :key="index">
                            <span style="margin-right:10px;"><img :src="item.photo" alt="" style="width:100px"></span>
                            <span>{{ item.name }}</span>
                            <span>x{{ item.num }}</span>
                            <span>{{ item.money }}</span>
                        </li>   
                    </ul>
                    <p class="deposit">{{ miNiOrderInfo.money }}</p>
                    <div class="plist-li"><p class="l"><span>订</span><span>单</span><span>状</span><span>态:</span></p>{{ miNiOrderInfo.state }}</div>
                    <div class="plist-li" v-if="miNiOrderInfo.remark"><p class="l"><span>备</span><span>注:</span></p>{{ miNiOrderInfo.remark }}</div>
                    <h1 class="search_detail_title">订单详情</h1>
                    <ul class="plist">
                        <li class="plist-li"><div class="l"><span>订</span><span>单</span><span>号:</span></div><div class="r">{{ miNiOrderInfo.orderNum }}</div></li>
                        <li class="plist-li"><div class="l"><span>配</span><span>送</span><span>房</span><span>间:</span></div><div class="r">{{ miNiOrderInfo.room }}</div></li>
                        <li class="plist-li"><div class="l"><span>接</span><span>收</span><span>人:</span></div><div class="r">{{ miNiOrderInfo.person }}</div></li>
                        <li class="plist-li"><div class="l"><span>下</span><span>单</span><span>时</span><span>间:</span></div><div class="r">{{ miNiOrderInfo.orderTime }}</div></li>
                        <li class="plist-li" v-if="miNiOrderInfo.predictTime"><div class="l"><span>预</span><span>计</span><span>送</span><span>达:</span></div><div class="r">{{ miNiOrderInfo.predictTime }}</div></li>
                        <li class="plist-li"  v-if="state == 2 && miNiOrderInfo.deliveryman"><div class="l">
                            <span>配</span><span>货</span><span>员</span></div><div class="r" >{{ miNiOrderInfo.deliveryman }}</div>
                        </li>
                        <li class="plist-li"  v-if="state == 3 && miNiOrderInfo.deliveryman"><div class="l">
                            <span>配</span><span>货</span><span>员</span></div><div class="r" >{{ miNiOrderInfo.deliveryman }}</div>
                        </li>
                        <li class="plist-li" v-if="state == 3 && miNiOrderInfo.deliverymanTime"><div class="l">
                            <span>配</span><span>货</span><span>时</span><span>间:</span></div><div class="r" >{{ miNiOrderInfo.deliverymanTime }}</div>
                        </li>
                        <li class="plist-li"  v-if="state == 4 && miNiOrderInfo.deliveryman"><div class="l">
                            <span>配</span><span>货</span><span>员</span></div><div class="r" >{{ miNiOrderInfo.deliveryman }}</div>
                        </li>
                        <li class="plist-li" v-if="state == 4 && miNiOrderInfo.deliverymanTime"><div class="l">
                            <span>配</span><span>货</span><span>时</span><span>间:</span></div><div class="r" >{{ miNiOrderInfo.deliverymanTime }}</div>
                        </li>
                        <li class="plist-li" v-if="state == 4 && miNiOrderInfo.arriveTime"><div class="l">
                            <span>送</span><span>达</span><span>时</span><span>间:</span></div><div class="r">{{ miNiOrderInfo.arriveTime }}</div>
                        </li>
                    </ul>
                </div>
                <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="SeeSure" v-if="state ==1 && onoff == true">立即处理</el-button>
                <el-button type="primary" @click="Sure" v-if="state ==1 && onoff == false">确认</el-button>
                
                <el-button type="primary" @click="SeeSure" v-if="state ==2 && onoff == true">立即配送</el-button>
                <el-button type="primary" @click="Sure" v-if="state ==2 && onoff == false">确认</el-button>

                <el-button type="primary" @click="SeeSure" v-if="state ==3 && onoff == true">确认到达</el-button>
                <el-button type="primary" @click="Sure" v-if="state ==3 && onoff == false">确认</el-button>

                 <el-button type="primary" @click="Sure" v-if="state ==4 || state ==5">确认</el-button>
                </div>
            </el-dialog>     -->
        </div>
    </div>
</template>
<script>
import { getMiNiList, getMiNiinfo, getMiNistate } from "@/public/js/goods.js";
export default {
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      stateTitle: "全部状态",
      state: "",
      //   stateNum : "",
      payTitle: "支付方式",
      pay: "",
      search: "",
      operator: "",
      room: "",
      tableData: [],
      orderCount: 0,
      loading: false,
      dialogVisible: false,
      miNiOrderInfo: "",
      infos: "",
      id: "",
      disabled_state: false,
      onoff: ""
    };
  },
  created() {
    this._getMiNiList();
  },
  methods: {
    //订单列表
    _getMiNiList() {
      var data = {
        pageNo: this.pageNum,
        pageSize: this.pageSize,
        state: this.state,
        pay: this.pay,
        room: this.room,
        operator: this.operator,
        search: this.search
      };
      getMiNiList(data).then(res => {
        console.log(res);
        this.tableData = res.data.miNiOrderList;
        this.orderCount = res.data.total;
      });
    },
    //全部状态
    setState(data) {
      this.stateTitle = data.title;
      this.state = data.value;
      this.pageSize = 10;
      this.pageNum = 1;
      this._getMiNiList();
    },
    //支付方式
    setPay(data) {
      this.payTitle = data.title;
      this.pay = data.value;
      this.pageSize = 10;
      this.pageNum = 1;
      this._getMiNiList();
    },
    //查询
    handleSearch() {
      this.pageSize = 10;
      this.pageNum = 1;
      this._getMiNiList();
    },
    //订单详情
    particulars(value) {
      console.log(value);
      localStorage.setItem("GetInfo", JSON.stringify(value));
      this.$router.push("/index/list_goods_detail?id=" + value.id);
      //this.dialogVisible = true;
      this.id = value.id;
      this.state = value.state;
      this.onoff = value.onoff;
      getMiNiinfo({ id: this.id }).then(res => {
        this.miNiOrderInfo = res.data.miNiOrderInfo;
        this.infos = res.data.miNiOrderInfo.infos;
      });
    },
    //更改订单状态
    // SeeSure() {
    //   this.dialogVisible = false;
    //   if (this.state >= 4) {
    //     return false;
    //   } else {
    //     this.state = this.state + 1;
    //   }
    //   var data = {
    //     id: this.id,
    //     state: this.state
    //   };
    //   getMiNistate(data).then(res => {
    //     this.state = "";
    //     this._getMiNiList();
    //   });
    // },
    // 取消订单
    _deleteMemberEquity(id) {
      this.$confirm("是否取消该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        getMiNistate({ id, state: 5 }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "取消成功!"
            });
            this._getMiNiList();
          }
        });
      });
    },
    // Sure() {
    //   this.dialogVisible = false;
    //   // this._getMiNiList();
    // },
    handleSizeChange(value) {
      this.pageSize = value;
      this._getMiNiList();
    },
    handleCurrentChange(value) {
      this.pageNum = value;
      this._getMiNiList();
    }
  }
};
</script>
<style lang="scss" scoped>
.mini_list {
  .mini_content {
    text-align: left;
    padding: 20px 30px;
  }
  .search_list {
    .search_list_title {
      margin-bottom: 10px;
    }
    .deposit {
      text-align: center;
    }
    .list_ul {
      li {
        overflow: hidden;
        margin-bottom: 10px;
        span {
          float: left;
          height: 70px;
          line-height: 70px;
          margin-right: 40px;
        }
      }
    }
    .search_detail_title {
      margin: 10px 0;
    }

    .plist-li {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      font-size: 15px;
      line-height: 27px;
      .l {
        width: 70px;
        margin-right: 10px;
        white-space: nowrap;
        color: #888888;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }
    }
  }
}
</style>
